<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东鼠标</title>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/mouse-index.css"/>
</head>
<body>
<!-- 主体部分 start-->
<div class="mouse_main w">
    <div class="mouse_l">
        <div class="bigimg" id="bigimg">
            <img src="imgs/mouse55.jpg" alt="罗技鼠标1"/>
            <img src="imgs/mouse11.jpg" alt="罗技鼠标2"/>
            <img src="imgs/mouse22.jpg" alt="罗技鼠标3"/>
            <img src="imgs/mouse33.jpg" alt="罗技鼠标4"/>
            <img src="imgs/mouse44.jpg" alt="罗技鼠标5"/>

            <div class="smallArea" id="smallArea"></div>
        </div>
        <div class="bigArea" id="bigArea">
            <img src="imgs/mouse01.jpg" alt="罗技鼠标1"/>
            <img src="imgs/mouse02.jpg" alt="罗技鼠标2"/>
            <img src="imgs/mouse03.jpg" alt="罗技鼠标3"/>
            <img src="imgs/mouse04.jpg" alt="罗技鼠标4"/>
            <img src="imgs/mouse05.jpg" alt="罗技鼠标5"/>
        </div>
        <div class="smallul" id="smallul">
            <ul>
                <li><img src="imgs/mouse1.jpg" alt="罗技鼠标"/></li>
                <li><img src="imgs/mouse2.jpg" alt="罗技鼠标"/></li>
                <li><img src="imgs/mouse3.jpg" alt="罗技鼠标"/></li>
                <li><img src="imgs/mouse4.jpg" alt="罗技鼠标"/></li>
                <li><img src="imgs/mouse5.jpg" alt="罗技鼠标"/></li>
            </ul>
            <div class="arrow" id="arrow">
                <a class="fl" href="javascript:;"></a>
                <a class="fr" href="javascript:;"></a>
            </div>
        </div>
        <div class="share">
            <span>商品编号：22564789</span><a href="#">关注商品</a><a href="#">分享</a>
        </div>
    </div>
    <div class="mouse_c">
        <div class="title">
            <h1><a href="#">小米6 手机 亮黑色【现货】 全网通4G（6G RAM+ 64G ROM）</a></h1>

            <p>【现货即发，新品热销】骁龙835，6GB大内存，四曲面；变焦双摄，【京东配送】</p>
            <a class="compare" href="javascript:;">对比</a>
        </div>
        <div class="sail">
            <div class="price"><span>京 东 价</span><i>￥2998.00</i> <a href="javascript:;">降价通知</a></div>
            <div class="apraise"><a href="javascript:;"><em>累计评价</em>

                <p>176230</p></a></div>
            <div class="sales">
                <div class="sales_name fl"><span>促　　销</span></div>
                <div class="fl">
                    <ul>
                        <li><i>限制</i>此价格不与套装优惠同时享受 <a href="#">详情 >></a></li>
                        <li><i>赠京豆</i> 赠10京豆 <a href="#">详情 >></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="adress">
            <div class="suport"><span>支　　持</span><i><em></em>礼品购</i></div>
            <div class="dest">
                <span class="fl">配 送 至</span>
                <div class="dest_l fl" id="triangle1"><dd>北京朝阳区三环以内</dd><i class="triangle"><em>◇</em></i>
                    <div class="map" id="map">
                        <h4>常用地址</h4>
                        <ul>
                            <li><input type="checkbox"/><span>非洲马达加斯加共和国西部小羊村</span></li>
                            <li><input type="checkbox"/><span>火星第9维第13区1308号</span></li>
                        </ul>
                    </div>
                </div>
                <div class="dest_r fl"><b>有货，</b><a href="#" title="了解配送费规则">在线支付免运费 | 货到付款<i class="msg"></i></a></div>
            </div>
            <div class="sercice"><span>服　　务</span>由京东发货，并提供售后。</div>
        </div>
        <div class="serverce">
            <div class="security">
                <span class="fl">增值保障</span>
                <div class="security_l fl" id="triangle2">
                    <b></b><dd>无理由2年 ￥249</dd><i class="triangle"><em>◇</em></i>
                    <div class="nowhy" id="nowhy">
                        <ul>
                            <li><input type="checkbox"/><i>优惠</i><span>厂保延1年</span><em>￥26</em><a href="#">详情>></a></li>
                            <li><input type="checkbox"/><i>优惠</i><span>第2年换新</span><em>￥29</em><a href="#">详情>></a></li>
                        </ul>
                    </div>
                </div>
                <div class="security_c fl" id="triangle3">
                    <b></b><dd>延长保2年 ￥169</dd><i class="triangle"><em>◇</em></i>
                    <div class="nowhy" id="prolong">
                        <ul>
                            <li><input type="checkbox"/><span>厂保延1年</span><em>￥26</em><a href="#">详情>></a></li>
                            <li><input type="checkbox"/><span>第2年换新</span><em>￥29</em><a href="#">详情>></a></li>
                            <li><input type="checkbox"/><span>1年内换新</span><em>￥39</em><a href="#">详情>></a></li>
                            <li><input type="checkbox"/><span>2年内换新</span><em>￥69</em><a href="#">详情>></a></li>
                        </ul>
                    </div>
                </div>
                <div class="security_r fl" id="triangle4">
                    <b></b><dd>屏碎保2年 ￥219</dd><i class="triangle"><em>◇</em></i>
                    <div class="nowhy" id="screen">
                        <ul>
                            <li><input type="checkbox"/><span>无理由换新</span><em>￥26</em><a href="#">详情>></a></li>
                            <li><input type="checkbox"/><span>意外换新</span><em>￥29</em><a href="#">详情>></a></li>
                        </ul>
                    </div>
                </div>
                <div class="msg" id="security-msg">
                    <a class="msga" href="javascript:;"></a>
                    <div class="security-msg" id="msg1">
                        <p>增值保障是指凡在京东购买商品或服务的消费者，在保障期间内遇到无论是正常使用中的问题还是意外事故，即可享受增值保障服务。保障内容包括：延长保修、只换不修、意外保护、服务保障。覆盖家电、手机数码、电脑办公、汽车用品、服饰家居等商品。</p>
                        <p>如有疑问，请与<a href="javascript:;">在线客服</a>联系</p>
                    </div>
                </div>
            </div>
            <div class="cover" id="cover"><span>选择套装</span><a href="javascript:;">1件</a><a href="javascript:;">套装2件</a>
            </div>
            <div class="stage" id="stage"><span>分　　期</span><a href="javascript:;">30天免息</a><a href="javascript:;">￥1014.32×3期</a><a
                    href="javascript:;">￥514.66×6期</a><a href="javascript:;">￥264.82×12期</a><a href="javascript:;">￥139.91×24期</a><i class="msg" id="stage-msg"></i>
            </div>
        </div>
        <div class="shopcar">
            <div class="cases fl">
                <input class="fl" type="text" value="1" id="numb"/>

                <div class="calc fl"><a title="一次性只支持购买6件" id="plus" href="javascript:;">+</a><a id="sub" href="javascript:;">-</a>
                </div>
            </div>
            <input type="submit" value="加入购物车" class="carbtn fl">
        </div>
        <!--msg部分-->
        <div class="stage-msg" id="msg2">
            <ul>
                <li>1、实际分期金额及手续费以白条剩余额度及收银台优惠为准</li>
                <li>2、什么是白条分期？<p>白条是一种“先消费，后付款”的支付方式，使用白条可以享受先用后付，以及最长36期的分期还款。</p></li>
            </ul>
        </div>
    </div>
    <div class="mouse_r">
        <div class="shoplogo"><img src="imgs/logo.jpg" alt="罗技鼠标logo"/></div>
        <div class="shoplinks">
            <div class="links">
                <div class="custmer"><span class="fl">罗技官方旗舰店</span><span class="fr">京东自营</span></div>
                <a href="javascript:;"><i></i>留言咨询</a>
                <a href="javascript:;"><i></i>咨询JIMI</a>
                <a href="javascript:;"><i></i>店铺首页</a>
                <a href="javascript:;"><i></i>关注店铺</a>
            </div>
            <div class="ssport">服务支持：<p><span><i></i>211限时达</span><span><i></i>自提</span></p></div>
        </div>
    </div>
</div>
<!-- 主体部分 end-->
<!--引入外部JS start-->
<script src="js/jquery-1.12.2.min.js"></script>
<script src="js/mouse.js"></script>
<!--引入外部JS end-->

</body>
</html>